<template>
  <div class="about-coupons">
    <ResponsiveNav />

    <div class="main-content">
      <!-- 顶部横幅 -->
      <div class="banner">
        <div class="banner-content">
          <h1>{{ $t('创建账户') }}</h1>
          <p>{{ $t('立即开启优惠卷之旅') }}</p>
          <button v-if="!userStore.isLogin" class="primary-btn"
            style="padding: 16px 32px; font-size: 18px; font-weight: bold; color: white; background: #FF6101; border: none; border-radius: 8px; cursor: pointer;"
            @click="handleRegister"
          >
            {{ $t('免费注册') }}
          </button>
        </div>
        <div class="banner-image">
          <img :src="bannerImage" alt="" />
        </div>
      </div>

      <!-- 数据统计 -->
      <div class="statistics">
        <div class="stat-item">
          <div class="number">237万</div>
          <div class="label">{{ $t('用户已注册') }}</div>
        </div>
        <div class="stat-item">
          <div class="number">+89%</div>
          <div class="label">{{ $t('优惠力度') }}</div>
        </div>
        <div class="stat-item">
          <div class="number">180+</div>
          <div class="label">{{ $t('每日优惠券') }}</div>
        </div>
      </div>

      <!-- 优惠券说明 -->
      <div class="features">
        <div class="feature-card">
          <div class="feature-image">
            <img :src="featureImage" alt="" />
          </div>
          <div class="feature-content">
            <h2>{{ $t('在线优惠券使用说明') }}</h2>
            <p class="subtitle">{{ $t('只需简单几步，轻松享受优惠') }}</p>
            <ul class="feature-list">
              <li>
                <i class="fas fa-check"></i>
                <span>{{ $t('浏览商品时直接点击"使用优惠券"') }}</span>
              </li>
              <li>
                <i class="fas fa-check"></i>
                <span>{{ $t('结算时自动计算优惠金额') }}</span>
              </li>
              <li>
                <i class="fas fa-check"></i>
                <span>{{ $t('支持多种优惠券叠加使用') }}</span>
              </li>
            </ul>
            <button class="learn-more">
              <i class="fas fa-arrow-right"></i>
              <span>{{ $t('了解更多') }}</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 优惠券类型 -->
      <div class="coupon-types">
        <h2>{{ $t('多样化的优惠方式') }}</h2>
        <p class="section-desc">{{ $t('为您提供更多省钱机会') }}</p>
        <div class="type-grid">
          <div class="type-card">
            <div class="type-icon">
              <i class="fas fa-tag"></i>
            </div>
            <h3>{{ $t('商品优惠券') }}</h3>
            <p>{{ $t('单品直接优惠，最高可享9折') }}</p>
          </div>
          <div class="type-card">
            <div class="type-icon">
              <i class="fas fa-gift"></i>
            </div>
            <h3>{{ $t('新人专享券') }}</h3>
            <p>{{ $t('新用户注册即可领取100元礼包') }}</p>
          </div>
          <div class="type-card">
            <div class="type-icon">
              <i class="fas fa-store"></i>
            </div>
            <h3>{{ $t('店铺优惠券') }}</h3>
            <p>{{ $t('全店通用，购物更划算') }}</p>
          </div>
          <div class="type-card">
            <div class="type-icon">
              <i class="fas fa-percent"></i>
            </div>
            <h3>{{ $t('满减优惠') }}</h3>
            <p>{{ $t('满199减30，满299减50') }}</p>
          </div>
        </div>
      </div>

      <!-- 使用流程 -->
      <div class="flow-section">
        <h2>{{ $t('优惠券购买流程') }}</h2>
        <p class="section-desc">{{ $t('简单四步轻松省钱') }}</p>
        <div class="flow-grid">
          <div class="flow-item">
            <div class="flow-image">
              <img :src="flowImages[0]" alt="" />
              <div class="step-number">1</div>
            </div>
            <div class="flow-content">
              <h3>{{ $t('查看优惠券') }}</h3>
              <p>{{ $t('在商品页面或优惠券限时秒杀查看您需要的优惠券') }}</p>
            </div>
          </div>

          <div class="flow-item">
            <div class="flow-image">
              <img :src="flowImages[1]" alt="" />
              <div class="step-number">2</div>
            </div>
            <div class="flow-content">
              <h3>{{ $t('选购优惠卷') }}</h3>
              <p>{{ $t('挑选心仪优惠卷加入购物车') }}</p>
            </div>
          </div>

          <div class="flow-item">
            <div class="flow-image">
              <img :src="flowImages[2]" alt="" />
              <div class="step-number">3</div>
            </div>
            <div class="flow-content">
              <h3>{{ $t('使用优惠券') }}</h3>
              <p>{{ $t('结算选择对应的优惠券') }}</p>
            </div>
          </div>

          <div class="flow-item">
            <div class="flow-image">
              <img :src="flowImages[3]" alt="" />
              <div class="step-number">4</div>
            </div>
            <div class="flow-content">
              <h3>{{ $t('完成支付') }}</h3>
              <p>{{ $t('确认订单并完成支付即可获取利润') }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="faq-section">
        <h2>{{ $t('常见问题') }}</h2>
        <div class="faq-grid">
          <div class="faq-card">
            <h3>{{ $t('优惠券使用有效期吗？') }}</h3>
            <p>{{ $t('是的，每张优惠券都有固定的使用期限，请在有效期内使用。') }}</p>
          </div>
          <div class="faq-card">
            <h3>{{ $t('优惠券可以叠加使用吗？') }}</h3>
            <p>{{ $t('部分优惠券支持叠加使用，具体以商品页面显示为准。') }}</p>
          </div>
          <div class="faq-card">
            <h3>{{ $t('使用优惠券后可以退货吗？') }}</h3>
            <p>{{ $t('支持退货，但优惠券抵扣金额不予退还。') }}</p>
          </div>
        </div>
      </div>

      <!-- 底部行动按钮 -->
      <div class="cta-section">
        <h2>{{ $t('立即开启您的省钱之旅') }}</h2>
        <p>{{ $t('现在注册即可领取新人专享优惠券') }}</p>
        <button v-if="!userStore.isLogin" class="primary-btn" @click="handleRegister">{{ $t('马上注册') }}</button>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from "@/store/modules/user";

const userStore = useUserStore()
const router = useRouter()
const bannerImage = ref('')
const featureImage = ref('')
const flowImages = ref<string[]>([])

const handleRegister = () => {
  router.push('/register')
}

// 动态导入图片
import('@/assets/images/abut/CN2NA_lofi.webp').then(module => {
  bannerImage.value = module.default
})

import('@/assets/images/abut/HL-NSI-02-Tall.webp').then(module => {
  featureImage.value = module.default
})

// 导入流程图片
Promise.all([
  import('@/assets/images/abut/selling-plans-mockedup.webp'),
  import('@/assets/images/abut/sellers-664220072.webp'),
  import('@/assets/images/abut/Fulfillment_Center_Conveyor_Belt_2.webp'),
  import('@/assets/images/abut/brand-prime-boxes-doorstep-delivery.webp')
]).then(modules => {
  flowImages.value = modules.map(m => m.default)
})
</script>

<style lang="scss" scoped>
.about-coupons {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: white;


  .main-content {
    flex: 1;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
  }

  .banner {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 60px;
    border-radius: 12px;
    margin: 20px 40px 60px;
    color: #232f3e;

    .banner-content {
      flex: 1;
      padding-right: 60px;
      max-width: 600px;

      h1 {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 20px;
        line-height: 1.2;
        color: #232f3e;
      }

      p {
        font-size: 20px;
        margin-bottom: 30px;
        color: #666;
      }
    }

    .banner-image {
      flex: 1;
      height: 400px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0 auto;
        display: block;
        transform: scale(1.1);
      }
    }
  }

  .statistics {
    display: flex;
    justify-content: space-around;
    margin: -30px 40px 60px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    .stat-item {
      text-align: center;

      .number {
        font-size: 36px;
        font-weight: bold;
        color: #232f3e;
        margin-bottom: 8px;
      }

      .label {
        color: #666;
      }
    }
  }

  .features {
    padding: 0 40px 60px;

    .feature-card {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

      .feature-image {
        flex: 1;
        height: 400px;

        img {
          width: 80%;
          height: 100%;
          object-fit: cover;
          margin: 0 auto;
          display: block;
          transform: translateX(-20px);
        }
      }

      .feature-content {
        flex: 1;
        padding: 60px;
        max-width: 500px;

        h2 {
          font-size: 32px;
          color: #232f3e;
          margin-bottom: 16px;
          line-height: 1.2;
        }

        .subtitle {
          font-size: 18px;
          color: #666;
          margin-bottom: 30px;
        }

        .feature-list {
          margin-bottom: 40px;

          li {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            i {
              color: #ff9900;
              margin-right: 12px;
              font-size: 20px;
            }

            span {
              font-size: 16px;
              color: #444;
              line-height: 1.6;
            }
          }
        }

        .learn-more {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #ff9900;
          font-weight: bold;
          border: none;
          background: none;
          cursor: pointer;
          padding: 0;
          font-size: 16px;

          &:hover {
            color: #e68a00;

            i {
              transform: translateX(4px);
            }
          }

          i {
            transition: transform 0.3s ease;
          }
        }
      }
    }
  }

  .coupon-types {
    margin-bottom: 60px;

    h2 {
      text-align: center;
      font-size: 28px;
      color: #232f3e;
      margin-bottom: 40px;
    }

    .section-desc {
      text-align: center;
      font-size: 18px;
      color: #666;
      margin-bottom: 60px;
    }

    .type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .type-card {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      .type-icon {
        width: 60px;
        height: 60px;
        background: #232f3e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

        i {
          font-size: 24px;
          color: white;
        }
      }

      h3 {
        font-size: 20px;
        color: #232f3e;
        margin-bottom: 16px;
      }

      p {
        color: #666;
        line-height: 1.6;
      }
    }
  }

  .flow-section {
    padding: 80px 40px;
    background: #f8f8f8;

    h2 {
      text-align: center;
      font-size: 32px;
      color: #232f3e;
      margin-bottom: 16px;
    }

    .section-desc {
      text-align: center;
      font-size: 18px;
      color: #666;
      margin-bottom: 60px;
    }

    .flow-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .flow-item {
      text-align: center;

      .flow-image {
        position: relative;
        margin-bottom: 24px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
          aspect-ratio: 4/3;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.05);
        }

        .step-number {
          position: absolute;
          top: 16px;
          left: 16px;
          width: 32px;
          height: 32px;
          background: #ff9900;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 18px;
        }
      }

      .flow-content {
        h3 {
          font-size: 20px;
          color: #232f3e;
          margin-bottom: 12px;
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }

  .faq-section {
    margin-bottom: 60px;

    h2 {
      text-align: center;
      font-size: 28px;
      color: #232f3e;
      margin-bottom: 40px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .faq-card {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      h3 {
        font-size: 18px;
        color: #232f3e;
        margin-bottom: 12px;
      }

      p {
        color: #666;
      }
    }
  }

  .cta-section {
    text-align: center;
    padding: 60px;
    background: #f8f8f8;
    color: white;
    border-radius: 12px;
    margin: 40px;

    h2 {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #232f3e;
    }

    p {
      font-size: 20px;
      margin-bottom: 30px;
      color: #666;
    }

    .primary-btn {
      padding: 16px 32px;
      font-size: 18px;
      font-weight: bold;
      color: white;
      background: #FF6101;
      border: none;
      border-radius: 8px;
      cursor: pointer;

      &:hover {
        background: #e68a00;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .about-coupons {
    .banner {
      flex-direction: column;
      text-align: center;
      padding: 40px;

      .banner-content {
        padding-right: 0;
        margin-bottom: 40px;
      }
    }

    .features .feature-card {
      flex-direction: column;

      .feature-image {
        width: 100%;
        height: 300px;
      }

      .feature-content {
        padding: 40px;
      }
    }

    .flow-section .flow-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .about-coupons {
    .banner {
      margin: 20px;

      h1 {
        font-size: 36px;
      }
    }

    .statistics {
      flex-direction: column;
      margin: 20px;

      .stat-item {
        margin-bottom: 30px;
      }
    }

    .flow-section .flow-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
